<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth' // 引入 Pinia store

const route = useRoute()
const router = useRouter()

const authStore = useAuthStore() // 获取 Pinia store

const activeIndex = computed(() => route.path)

// 处理登出逻辑
const handleLogout = () => {
  authStore.logout() // 调用 Pinia store 中的登出方法
  router.push('/login') // 重定向到登录页面
}

const isMobileMenuOpen = ref(false)
const windowWidth = ref(window.innerWidth)

const updateWindowWidth = () => {
  windowWidth.value = window.innerWidth
}

onMounted(() => {
  window.addEventListener('resize', updateWindowWidth)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateWindowWidth)
})

const isMobile = computed(() => windowWidth.value <= 768)
</script>

<template>
  <header class="app-header">
    <div class="header-content">
      <div class="left-section">
        <div class="logo">
          <img src="https://8cmcy8.github.io/docs/%E8%BE%89%E5%A4%9C%E6%9A%97.jpg" alt="Logo" />
          <span>图书管理系统</span>
        </div>
        <el-icon v-if="activeIndex === '/home'" class="mobile-menu-icon" @click="isMobileMenuOpen = !isMobileMenuOpen">
          <Menu />
        </el-icon>
        <el-menu
          v-if="!isMobileMenuOpen || activeIndex !== '/home'"
          :default-active="activeIndex"
          class="main-menu"
          :mode="activeIndex === '/home' && isMobile ? 'vertical' : 'horizontal'"
          :ellipsis="false"
          router
        >
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/books">图书管理</el-menu-item>
          <el-menu-item index="/about">关于我们</el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧用户操作 -->
      <div class="right-section">
        <el-menu
            mode="horizontal"
            @select="handleLogout"
            class="main-menu"
            :ellipsis="false"
            style="margin-right: 20px"
        >
          <el-menu-item @click="handleLogout">登出</el-menu-item>
        </el-menu>
        <div>powered by cmcy</div>
      </div>
    </div>
  </header>
</template>

<style scoped>
.app-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e7e7e7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  height: 64px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
}

.left-section, .right-section {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 40px;
  cursor: pointer;
}

.logo img {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.logo span {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

/* 基础菜单项样式 */
.el-menu--horizontal > .el-menu-item {
  height: 63px;
  font-size: 15px;
  color: #606266;
  transition: all 0.3s ease; /* 添加过渡动画 */
  position: relative; /* 为伪元素定位 */
  min-width: 100px;
  padding: 0 15px;
}

/* 鼠标悬停效果 - 改为放大效果 */
.el-menu--horizontal > .el-menu-item:hover {
  background-color: #f5f7fa; /* 悬停背景色 */
  color: #409eff; /* 悬停文字颜色 */
  transform: scale(1.05); /* 放大效果 */
}

/* 底部悬停线条效果 */
.el-menu--horizontal > .el-menu-item:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1.7px;
  background: skyblue;
  border-radius: 1px;
  animation: smoothSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes smoothSlideIn {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/* 激活状态样式 */
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #409eff;
  color: #303133;
  font-weight: 500;
  background-color: #f0f9ff; /* 激活状态背景 */
}

/* 激活状态不显示悬停底线 */
.el-menu--horizontal > .el-menu-item.is-active:hover::after {
  display: none;
}

/* 右侧菜单样式 */
.right-section {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* 右侧菜单项特殊悬停效果 - 也改为放大 */
.right-section .el-menu-item:hover {
  background-color: #fef0f0 !important; /* 登出按钮特殊颜色 */
  color: #f56c6c !important; /* 红色警告色 */
  border-radius: 4px; /* 圆角效果 */
  transform: scale(1.08) !important; /* 登出按钮放大稍微大一点 */
}

/* 底线滑入动画 */
@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 60%;
    opacity: 1;
  }
}

/* 点击效果 - 改为轻微缩小 */
.el-menu--horizontal > .el-menu-item:active {
  transform: scale(0.98);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .mobile-menu-icon {
    display: block;
    font-size: 24px;
    cursor: pointer;
  }
  .main-menu {
    position: absolute;
    top: 64px;
    left: 0;
    background: white;
    z-index: 1000;
  }
}
</style>